import { Query } from '@/utils/Query.js'

export default function (
  map,
  event,
  eventlevel,
  eventtime,
  eventlocation,
  eventstatus,
  carnumber,
  driver
) {
  var clickFeature = null
  var popup = null
  const onSearch = (
    map,
    event,
    eventlevel,
    eventtime,
    eventlocation,
    eventstatus,
    carnumber,
    driver
  ) => {
    const eventList = [
      {
        where: `事件类型 = '${event}' and 事件等级 = 1`,
        src: '@/../eventlevel1.svg',
      },
      {
        where: `事件类型 = '${event}' and 事件等级 = 2`,
        src: '@/../eventlevel2.svg',
      },
      {
        where: `事件类型 = '${event}' and 事件等级 = 3`,
        src: '@/../eventlevel3.svg',
      },
      {
        where: `事件类型 = '${event}' and 事件等级 = 4`,
        src: '@/../eventlevel4.svg',
      },
    ]
    eventList.map((item) => {
      let where = item.where
      const service = { docName: 'guanggu', layerId: 2 }
      Query.queryBySql({
        where,
        service,
        callback: (res) => querySuccess(res, item),
      })
    })
    function querySuccess(result, item) {
      // 初始化Zondy.Format.PolygonJSON类
      var format = new Zondy.Format.PolygonJSON()
      //将MapGIS要素JSON反序列化为ol.Feature类型数组
      var features = format.read(result)
      /* 将查询到的要素高亮显示 */
      let source = new ol.source.Vector({
        wrapX: false,
      })
      if (features) {
        source.addFeatures(features)
        let layer = new ol.layer.Vector({
          source,
          style: new ol.style.Style({
            image: new ol.style.Icon({
              src: item.src,
              anchor: [0.5, 0.9],
            }),
          }),
        })
        map.value.addLayer(layer)
        // 监听地图层级变化
        map.value.getView().on('change:resolution', function () {
          var style = layer.getStyle()
          // 重新设置图标的缩放率，基于层级10来做缩放
          style.getImage().setScale(this.getZoom() / 10)
          layer.setStyle(style)
        })

        var container = document.getElementById('popupp')
        var content = document.getElementById('popupp-content')
        var closer = document.getElementById('popupp-closer')
        popup = new ol.Overlay({
          //要转换成overlay的HTML元素
          element: container,
          //当前窗口可见
          autoPan: true,
          //popup放置的位置
          positioning: 'bottom-center',
          //是否应该停止事件传播到地图窗口
          stopEvent: true,
          autoPanAnimation: {
            //当popup超出地图边界时，为了popup全部可见，地图移动的速度
            duration: 250,
          },
        })
        map.value.addOverlay(popup)
        //添加关闭按钮的单击事件（隐藏popup）
        closer.onclick = function () {
          //未定义popup位置
          popup.setPosition(undefined)
          //失去焦点
          closer.blur()
          return false
        }
        clickFeature = function (e) {
          // 获取当前点击的点是否存在要素, 并返回
          const feature = map.value.forEachFeatureAtPixel(
            e.pixel,
            function (feature, layer) {
              return feature
            }
          )
          if (feature) {
            if (popup.getPosition() == undefined) {
              let value = feature.values_.values_
              eventlevel.value = value['事件等级']
              eventtime.value = value['发生时间']
              eventlocation.value = value['发生地点']
              const level = value['处理状态']
              if (level == 0) {
                eventstatus.value = '未处理'
              } else if (level == 1) {
                eventstatus.value = '已处理'
              } else {
                eventstatus.value = '忽略'
              }
              carnumber.value = value['车牌号']
              driver.value = value['驾驶员']
              var position = feature.getGeometry().flatCoordinates
              popup.setPosition(position)
            }
          }
        }
        map.value.on('click', clickFeature)

        map.value.on('pointermove', function (e) {
          var pixel = map.value.getEventPixel(e.originalEvent)
          var hit = map.value.hasFeatureAtPixel(pixel)
          map.value.getTargetElement().style.cursor = hit ? 'pointer' : ''
        })
      }
    }
  }

  const unSearch = (map) => {
    map.value.getLayers().array_.splice(5, 4)
    map.value.render()
    map.value.un('click', clickFeature)
    popup.setPosition(undefined)
  }

  return { onSearch, unSearch }
}
